<template>
	<div id="confirmOrder">
		<!--<haders title="确认订单"></haders>-->

		<!--<scroller ref="scroller">-->
			<div class="pd333">
				<div class="shipAddress pud20">
					<p class="maheng">收货地址 </p>
					<div class="plr20 addres backright">
						<p><span>地址：</span>{{items.ShowAddress}}</p>
						<p><span>{{items.Name}}</span><span>{{items.Tel}}</span></p>
						<i @click="getAddURL" class="iconfont  icon-fanhui"></i>
					</div>
				</div>

				<div class="shopp wallfff md20">
					<p class="maheng">{{Goods.ShopName}} </p>
					<div class="shangp">
						<i>
						<img  :src="Goods.GoodsImg" alt="加载失败" :onerror="imgError"/>
					</i>
						<div class="titel">
							<p class="aline2">{{Goods.GoodsName}}</p>
							<p class="aline2">{{Goods.GoodsAbout}}</p>
							<p class="jiage"><span>￥{{Goods.CloudPrice}}</span> <span>×1</span></p>
						</div>
					</div>
				</div>

				<div class="others">
					<ul>
						<li>
							<span>配送方式</span>
							<a @click="isExpress">
								<font>{{labnametwo}}</font>
								<i class="iconfont icon-fanhui"></i>
							</a>
						</li>
						<li>
							<span>运费</span>
							<a>
								<font>包邮</font>
							</a>
						</li>
						<li>
							<span>支付方式</span>
							<a @click="isPay">
								<font>{{labname}}</font>
								<i class="iconfont icon-fanhui"></i>
							</a>
						</li>
						<textarea placeholder="备注" class="textarea" v-model="userRemarks ">
						
					</textarea>
					</ul>

				</div>

			</div>

		<!--</scroller>-->

		<footer class="footer">
			<ul>
				<li>共<span class="c-red">1</span>件商品</li>
				<li>合计<span class="c-red">￥{{Goods.CloudPrice}}</span></li>
				<li>
					<a @click="accounts">结算</a>
				</li>
			</ul>
		</footer>
		<!--支付方式选项-->
		<mt-popup v-model="popupVisible" position="bottom">
			<div class="selset">
				<mt-radio align="right" title="支付方式" v-model="values" :options="options" @change="ckRadio()">
				</mt-radio>
			</div>
		</mt-popup>

		<!--配送方式-->
		<mt-popup v-model="peiHuo" position="bottom">
			<div class="selset">
				<mt-radio align="right" title="配送方式" v-model="valueTwo" :options="optionsTwo" @change="ckRadiotwo()">
				</mt-radio>
			</div>

		</mt-popup>

	</div>
</template>

<script>
	import { Popup } from 'mint-ui';
	import { Radio } from 'mint-ui';
	import { Cell } from 'mint-ui';
	import Qs from 'qs';
	import { Toast } from 'mint-ui';
	import { MessageBox } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	export default {
		name: 'confirmOrder',
		components: {
			Popup,
			Radio,
			Cell
		},
		data() {
			return {
				popupVisible: false,
				peiHuo: false,
				labname: '微信支付',
				values: '1',
				labnametwo:'',
				valueTwo:'',
				options: [{
					label: '微信支付',
					value: '1'

				}],
				optionsTwo:[{
						label: '自提',
						value: '1' 
					} 
				],
				items: [], //地址
				Goods: [], //商品
				userRemarks: '',
				freightPrice: '5.5', //运费金额
			}
		},
		created(){
			this.shopId = this.$route.params.shopId;
			this.goodsId = this.$route.params.goodsId;
			this.joinType = this.$route.params.joinType;
			this.orderRecordId = this.$route.params.orderRecordId;
			this.imgError=this.$store.state.imgError;
			this.Contact=this.$store.state.Contact;
		},
		mounted() {
			this.getAdders();
			this.getGoodsDetails();
		},
		methods: {
			getAddURL() {
				this.$router.push({
					path: '/clientele/addAddress'
				})
			},
			//获取默认第一个地址,
			getAdders() {
				let _this = this;
				console.log(_this.Contact+'asdasd12');
				if(_this.Contact){
					_this.$http.get('/GroupBuy/GetMyAddressDetails',{
						params: {
							"id": _this.Contact
						}	
					}).then((res) => {
						if(res.data.code==1){
							let items=res.data.data;
							 _this.items=items;
						}else{
							Toast(res.data.msg)
						}  
					}).catch((err) => {
						console.log(err);
					});  
				}else{
					_this.$http.get("/GroupBuy/GetMyAddress", {
						params: {
							"page": 1
						}
					}).then((res) => {
						if(res.data.data.List == "") { 
							MessageBox.alert('您还没有收货地址？去设置').then(action => { 
								_this.$router.push({
									path: '/clientele/addAddress'
								})
							});  
						} else {
							_this.items = res.data.data.List[0];
						}
					}).catch((err) => {
						console.log(err)
					}); 
				}  
			},
			//获取拼团商品
			getGoodsDetails() {
				Indicator.open({text: '加载中...'}); 
				this.$http.get("/GroupBuy/GetGoodsDetails", {
					params: {
						"goodsId": this.goodsId
					}
				}).then((res) => {
					console.log(res);
					if(res.data.code == 1) { 
						this.Goods = res.data.data;
					 let type=this.Goods.DeliveryType;
					this.valueTwo=type;
					if(type==1){
						this.labnametwo='自提';
						this.optionsTwo[0].label='自提';
						this.optionsTwo[0].value=1;
					}else if(type==2){
						this.labnametwo='快递';
						this.optionsTwo[0].label='快递';
						this.optionsTwo[0].value=2;
					} 
						Indicator.close();
					} else {
						Toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err)
				});
			},
			ckRadio: function() {
				//支付方式 名称判断
				let _this = this;
				let label = _this.values; 
			},
			ckRadiotwo: function() {
				//配送方式 名称判断
				let _this = this;
				let label = _this.valueTwo; 
			},
			isPay: function() {
				//显示支付方式
				this.popupVisible = true;
			},
			isExpress: function() {
				//显示配送方式
				this.peiHuo = true;
			},
			accounts(){
				//结算 
				let _this = this;
				Indicator.open({text: '加载中...'}); 
				let	params = {
						/*"shopId": _this.shopId, //店铺id*/
						"goodsId": _this.goodsId, //商品id
						"goodsCount": 1, //购买数量,默认为1
						"contact": _this.items.Name, //收货人
						"phone": _this.items.Tel, //联系电话
						"address": _this.items.ShowAddress, //收货地址
						"joinType": _this.joinType, //拼团类型(1-开团,2-参团) 
						"payType": _this.values, //支付方式
						"deliveryType": _this.valueTwo, //物流方式
						"freightPrice": _this.freightPrice, //运费
						"userRemarks": _this.userRemarks //用户备注  
					}
					if(_this.joinType = 2) {
						params.orderRecordId = _this.orderRecordId;
					}
					console.log(params)
					_this.$http.post('/GroupBuy/DetermineOrder', Qs.stringify(
						params
					)).then((res) => { 
						console.log(res);
						if(res.data.code == 1) { 
							window.location.href=res.data.data;
							
							} else {
								Toast(res.data.msg);
							}
							Indicator.close();
					}).catch((err) => {
						console.log(err);
					});
			}
		}
	}
</script>

<style scoped>
	#haders{
		position: fixed !important;
	} 
	.shipAddress {
		width: 100%;
		background-color: #fff;
		font-size: 0.373333rem;
		color: #999999;
		margin-bottom: 0.3rem;
	}
	
	.maheng {
		width: 100%;
		font-size: 0.4rem;
		color: #333333;
		border-bottom: 1px solid #999999;
		padding: 0.2rem 0;
		text-indent: 0.3rem;
	}
	
	.maheng i {
		font-size: 0.48rem;
		margin-left: 0.133333rem;
		color: #333;
	}
	
	.addres p {
		margin-top: 0.3rem;
	}
	
	.addres p:nth-child(2) span {
		margin-right: 1rem;
	}
	
	.backright {
		position: relative;
	}
	
	.backright i {
		position: absolute;
		right: 0;
		top: 20%;
		font-size: 0.666666rem;
		color: #333333;
		z-index: 20;
	}
	
	.shangp {
		padding: 0.3rem;
		overflow: hidden;
	}
	
	.shangp i {
		float: left;
		width: 45%;
		height:4rem;
		margin-right: 3%;
	}
	
	.shangp i img {
		width: 100%;
		height: 100%;
	}
	
	.titel {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 4rem;
		font-size: 0.346666rem;
		color: #999999;
	}
	
	.titel p:nth-child(1) {
		font-size: 0.373333rem;
		color: #333333;
	}
	
	.titel p:nth-child(3) {}
	
	.jiage {
		display: flex;
		justify-content: space-between;
		color: #999999;
	}
	
	.others {
		background-color: #fff;
	}
	
	.others ul li {
		width: 100%;
		padding: 0.2rem 0.3rem;
		border-bottom: 1px solid #ccc;
		font-size: 0.373333rem;
		color: #999;
	}
	
	.others ul li a {
		float: right;
	}
	
	.others ul li a i {
		display: inline-block;
		margin-left: 0.2rem;
		font-size: 0.506666rem;
		float: right;
		font-weight: 700;
	}
	
	.textarea {
		width: 90%;
		margin: 0.3rem 5%;
		padding: 0.2rem;
		border: 1px solid #999999;
		border-radius: 0.066666rem;
		min-height: 3rem;
		resize: none;
	}
	
	.footer {
		width: 100%;
		height: 1.33333rem;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		background-color: #fff;
		overflow: hidden;
	}
	.footer ul{
		height: 100%;
	}
	.footer ul li {
		float: left;
		width: 33.3333%;
		line-height: 1.33333333rem;
		padding-left: 0.3rem;
		font-size: 0.373333rem;
		height: 100%;
	}
	
	.footer ul li a {
		width: 100%;
		height: 100%;
		text-align: center;
		display: inline-block;
		background-color: #6530E0;
		color: #fff;
		font-size: 0.4rem;
		font-weight: 700;
	}
	
	.selset {
		width: 100%;
		background-color: #fff;
	}
	
	.mint-popup {
		width: 100%;
	}
</style>